<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>若依介绍</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>

</head>

<body class="gray-bg">

    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-sm-12">

                <div class="ibox float-e-margins">

                    <div id="main" style="width: 80%;height:400px;margin:0 auto;margin-top: 30px;"></div>

                </div>
            </div>

        </div>
    </div>
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/Highcharts-7.0.2/code/highcharts.js}"></script>
    <script type="text/javascript">


        $(function() {
            var names = [];    //供电单位（实际用来盛放X轴坐标值）
            var nums = [];    //大用户数量（实际用来盛放Y坐标值）
            $.ajax({
                type: "post",
                async: true,
                url: "/basics/user/LargeUser",
                data: {},
                dataType: "json",
                success: function (result) {
                    console.log("res=="+JSON.stringify(result))
                    if (result) {
                        for (var i = 0; i < result.length; i++) {
                            names.push(result[i].name);    //供电单位
                        }
                        for (var i = 0; i < result.length; i++) {
                            nums.push(result[i].num);    //大用户数量
                        }

                        $('#main').highcharts({
                            chart: {
                                type: 'column'
                            },
                            title: {
                                text: '大用户数'
                            },
                            xAxis: {
                                categories: names,
                                crosshair: true
                            },
                            yAxis: {
                                min: 0,
                                title: {
                                    text: '数量'
                                }
                            },
                            tooltip: {
                                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                                '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                                footerFormat: '</table>',
                                shared: true,
                                useHTML: true
                            },
                            plotOptions: {  //柱子宽度
                                column: {
                                    pointPadding: 0.3,
                                    borderWidth: 0,
                                    pointWidth: 30
                                }
                            },
                            series: [{
                                name: '大用户数量',
                                data: nums
                            }]
                        });

                    }

                },
                error: function (errorMsg) {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");
                    chart.hideLoading();
                }
            })
        })

    </script>
</body>
</html>
